<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>前端静态HTML页面自动检测更新</title>
</head>

<body>
  <h2>前端静态HTML页面自动检测更新-示例-使用全局构建版本</h2>
  <div>随便修改下页面内容，部署到web服务器后，即可体验提示更新~！更新下</div>
  <div>小结：打开页面后，如果点击了取消，不再提示更新。点击确定，则更新本次。</div>
  <div>如果点击确定更新完本次。后续有第2次更新，点击取消。再在第3次更新，则这次不会触发弹框更新。</div>
  <div>第2次，本次点击取消。查看效果。</div>
  <div>第3次，本次先观察有没有弹框。如没有则说明点击取消后，只要页面不关闭，后续都不提示更新。如果有弹框（实际没有弹框），则点击确认查看效果。</div>
  <script src="https://unpkg.com/version-update-polling/dist/version-update-polling.min.js"></script>
  <script>
    const { createVersionPolling } = VersionPolling;

    createVersionPolling({
      appEtagKey: "__APP_ETAG__",
      pollingInterval: 5 * 1000,
      onUpdate: (self) => {
        if (self.options.forceUpdate) {
          alert('页面有更新，点击确定刷新页面！');
          self.onRefresh();
          return;
        }
        const result = confirm("页面有更新，点击确定刷新页面！");
        if (result) {
          self.onRefresh();
        } else {
          self.onCancel();
        }
      },
    });
  </script>
</body>

</html>